<template>
  <div class="card col pd2">
    <label>{{ props.pos.name }}</label>
    <label class="mt font1">{{ jt }}</label>
    <label class="mt font1">{{ tl }}</label>
    <div class="row mt">
      <el-button @click="props.onMoveJ(props.pos)" type="warning">MoveJ</el-button>
      <el-button @click="props.onMoveL(props.pos)" type="success">MoveL</el-button>
      <el-button @click="props.onDelete(props.pos)" type="info">删除</el-button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue';
import { NamedPos } from '../robot/model';

interface PropInfo {
  pos: NamedPos,
  onMoveJ: (pos: NamedPos) => Promise<void>,
  onMoveL: (pos: NamedPos) => Promise<void>;
  onDelete: (pos: NamedPos) => Promise<void>;
}

const props = defineProps<PropInfo>();

const jt = computed(()=>{
  const v = props.pos.jt;
  const p1 = v.p1.toFixed(3);
  const p2 = v.p2.toFixed(3);
  const p3 = v.p3.toFixed(3);
  const p4 = v.p4.toFixed(3);
  const p5 = v.p5.toFixed(3);
  const p6 = v.p6.toFixed(3);
  return `关节位置: (${p1},${p2},${p3},${p4},${p5},${p6})`;
});

const tl = computed(()=> {
  const v = props.pos.tl;
  const p1 = v.x.toFixed(3);
  const p2 = v.y.toFixed(3);
  const p3 = v.z.toFixed(3);
  const p4 = v.rx.toFixed(3);
  const p5 = v.ry.toFixed(3);
  const p6 = v.rz.toFixed(3);
  return `工具位置: (${p1},${p2},${p3},${p4},${p5},${p6})`;
});

</script>
